<template>
	<view class="nav">
		<view class="big-view">
			<view>
				<view class="mfzx" @click="zixun">
					<image src="../../static/健康咨询@1x.png" mode=""></image>
				</view>
				<p class="navtext1">免费咨询</p>
				<p class="navtext2">每日两次免费问</p>
			</view>
			<view>
				<view @click="siwen" class="mfzx" style="background: linear-gradient(90deg, #139CFC 0%, #0894F6 100%);">
					<image src="../../static/售前咨询@1x.png" mode=""></image>
				</view>
				<p class="navtext1">私问</p>
				<p class="navtext2">问题极速响应</p>
			</view>
			<view>
				<view @click="dianh" class="mfzx" style="background: linear-gradient(90deg, #00C5D6 0%, #00BECE 100%);">
					<image src="../../static/20gl-phoneTime.png" mode=""></image>
				</view>
				<p class="navtext1">计时电话</p>
				<p class="navtext2">30分钟电话沟通</p>
			</view>
			<view>
				<view @click="yeujian" class="mfzx" style="background: linear-gradient(90deg, #FD873D 0%, #FD7E39 100%);">
					<image src="../../static/见面会@1x.png" mode=""></image>
				</view>
				<p class="navtext1">约见律师</p>
				<p class="navtext2">律所面对面咨询</p>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"four-button",
		data() {
			return {
				
			};
		},
		methods: {
			// 免费咨询
			zixun () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=免费咨询"
				})
			},
			// 私问
			siwen () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=私问"
				})
			},
			// 计时电话
			dianh () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=计时电话"
				})
			},
			// 约见律师
			yeujian () {
				uni.navigateTo({
					url: "/pages/Attorney side/consult/consult?name=约见律师"
				})
			},
		}
	}
</script>

<style>
.nav {
		width: 750rpx;
		height: 228rpx;
		opacity: 1;
		background: #FFFFFF;
	}
	.nav > .big-view {
		width: 666rpx;
		height: 174rpx;
		margin: 30rpx 0 0 42rpx;
		display: flex;
		justify-content: space-between;
	}
	.big-view > view {
		width: 144rpx;
		height: 174rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-evenly;
	}
	.mfzx {
		width: 144rpx;
		height: 92rpx;
		background: linear-gradient(90deg, #00C393 0%, #00B98A 100%);
		border-radius: 46rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mfzx > image {
		width: 56rpx;
		height: 56rpx;
	}
	.navtext1 {
		width: 112rpx;
		height: 32rpx;
		opacity: 1;
		font-size: 28rpx;
		font-weight: bold;
		line-height: 32rpx;
		text-align: center;
	}
	.navtext2 {
		width: 158rpx;
		height: 26rpx;
		opacity: 1;
		font-family: HarmonyOS Sans SC;
		font-size: 22rpx;
		font-weight: normal;
		line-height: 26rpx;
		letter-spacing: 0rpx;
		color: #A9A9A9;
		text-align: center;
	}
</style>